import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
const R = require('ramda');

import EditDrawer from '../components/EditDrawer';
import DrawerLimited from '../components/DrawerLimited';
import RightBox from "../../commons/RightBox";
import RIGHT from "../../../utils/RightConstants";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TabPane = Tabs.TabPane;

export default Form.create({wrappedComponentRef: true})(class Drawer extends React.Component {
    constructor(props) {
        super(props);
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
        this.state = {

        };
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }

    handleOpenAdd = () => {
        this.editDrawer.handleOpen("add");
    }


    onEdit = (record, type) => {
        this.props.dispatch({type: 'drawer/getDrawerById', payload: {id: record.id}});
        this.editDrawer.handleOpen(type);
    };

    onChangeLimit = (id) => {
        this.props.dispatch({type: 'drawer/getDrawerById', payload: {id}});
        this.drawerLimited.handleOpen();
    };

    handleSearch = () => {
        let values = this.props.form.getFieldsValue();
        let newPage = this.props.page;
        newPage.page = 1;
        this.props.dispatch({
            type: 'drawer/getDrawerListByCstId',
            payload: {
                page: newPage,
                cstId: this.props.cstid,
                drawerName: values.drawerName,
                taxplayercode: values.taxplayercode,
                status: values.status,
            }
        });
    };

    columns = [
        {title: '开票人名称', dataIndex: 'name', key: 'name'},
        {title: '纳税人识别号', dataIndex: 'taxplayercode', key: 'taxplayercode'},
        {title: '申请人', dataIndex: 'creatorName', key: 'creatorName'},
        {title: '申请时间', dataIndex: 'createtime', key: 'createtime'},
        {title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                let drawerLimit = <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_DRAWER_LIMIT} split={true}>
                    <a href="#" onClick={this.onChangeLimit.bind(this, record.id)}>修改限额</a></RightBox>
                return (
                    <span>
                        {record.status === '4' ? drawerLimit : null}
                        {this.props.disabled == true || record.status == 2 || record.status == 4 || record.status == 5 ?
                            <span>
                                 <a href="#" onClick={this.onEdit.bind(this, record, "view")}>查看</a>
                            </span>
                            :
                            <span>
                                {record.status == 1 || record.status == 3 ?
                                    <span>
                                        <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_DRAWER_EDIT}><a href="#" disabled={this.props.disabled}
                                           onClick={this.onEdit.bind(this, record, "edit")}>编辑</a>
                                        <span className="ant-divider"/></RightBox>

                                        <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_DRAWER_DELETE}><Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'}
                                            onConfirm={() => {
                                                this.props.dispatch({
                                                     type:  'drawer/deleteDrawerById',
                                                     payload: {
                                                     id: record.id,
                                                     cstid: record.cstid,
                                                     onSuccess:()=>{
                                                         this.handleSearch();
                                                     }
                                                }
                                             })
                                          }} okText="是" cancelText="否">
                                 <a href="#" disabled={this.props.disabled} >删除</a>
                             </Popconfirm></RightBox>
                             </span>
                             : ""}                               
                       </span>
                     }
                  </span>
                );
             }
         }];
          

    render() {
        const { getFieldDecorator } = this.props.form;
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 8 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
        };
        let values = this.props.form.getFieldsValue();
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.page.size,
            total: this.props.page.totalRow,
            showSizeChanger: true,
            current: this.props.page.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'drawer/getDrawerListByCstId',
                    payload: {
                        page: newPage,
                        cstId: this.props.cstid,
                        drawerName: values.drawerName,
                        taxplayercode: values.taxplayercode,
                        status: values.status,
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'drawer/getDrawerListByCstId',
                    payload: {
                        page: newPage,
                        cstId: this.props.cstid,
                        drawerName: values.drawerName,
                        taxplayercode: values.taxplayercode,
                        status: values.status,
                    }
                });
            }
        }

        return (
            <div>
                <Form>
                    <Row>
                        <Col span={9}><FormItem {...formItemLayout} label={'纳税人识别码'}>{getFieldDecorator('taxplayercode')(<Input/>)}</FormItem></Col>
                        <Col span={8}><FormItem {...formItemLayout} label={'开票人名称'}>{getFieldDecorator('drawerName')(<Input/>)}</FormItem></Col>

                        <RightBox resource={RIGHT.SUPPLIER.SUPPLIER_DETAIL_DRAWER_ADD}><Col span={5} >
                            <Button type="primary" icon="plus" size={'default'} disabled={this.props.disabled} onClick={this.handleOpenAdd.bind(this)}
                                    style={{marginLeft:10}}>增加开票人</Button>
                        </Col></RightBox>

                    </Row>
                    <Row>
                        <Col span={5}>
                            <FormItem {...formItemLayout} label={'状态'}>
                                {getFieldDecorator('status', {
                                    initialValue: "1"
                                })(
                                    <RadioGroup style={{width: 800}}>
                                        <Radio value="1">待申请</Radio>
                                        <Radio value="2">待审核</Radio>
                                        <Radio value="3">待补充资料</Radio>
                                        <Radio value="4">审核通过</Radio>
                                        <Radio value="5">审核不通过</Radio>
                                    </RadioGroup>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={5} >
                            <Button type="primary" icon="search" style={{marginLeft: 374}} onClick={this.handleSearch.bind(this)}>查询</Button>
                        </Col>
                    </Row>
                    <Row>


                    </Row>

                </Form>
                <Table dataSource={this.props.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination}/>

                <EditDrawer wrappedComponentRef={(inst) => this.editDrawer = inst} dispatch={this.props.dispatch} dataSource={this.props.dataSource} cstId={this.props.cstid}  taxplayercode={this.props.taxplayercode}
                            handleSearch = {this.handleSearch} csttype={this.props.csttype}/>
                <DrawerLimited wrappedComponentRef={(inst) => this.drawerLimited = inst} dispatch={this.props.dispatch} dataSource={this.props.dataSource} handleSearch = {this.handleSearch}/>
            </div>
        )
    }
})


// WEBPACK FOOTER //
// ./public/src/components/supplier/components/Drawer.js